<template>
  <div class="block full user_index">
    <div class="block-title">
      <h2>管理员列表</h2>
    </div>
    <div class="table-responsive">
      <div class="btn-group" :style="{'margin-bottom': '10px'}">
        <button type="button" class="btn btn-danger">Left</button>
        <button type="button" class="btn btn-primary" :style="{'margin-left': '10px'}">Middle</button>
        <button type="button" class="btn btn-success" :style="{'margin-left': '10px'}"> Right</button>
      </div>
      <table id="example-datatable" class="table table-striped table-bordered table-vcenter">
        <thead>
        <tr>
          <th>用户id</th>
          <th>账号</th>
          <th>昵称</th>
          <th>邮箱</th>
          <th>描述</th>
          <th>是否禁用</th>
          <th>爱好</th>
          <th>所属组</th>
          <th>登录时间</th>
          <th>登录次数</th>
          <th>创建时间</th>
          <th>修改时间</th>
          <th class="text-center" style="width: 200px;"><i class="fa fa-flash"></i></th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(list,index) in lists">
          <td><input type="checkbox" v-model="actions_param" :value="list.id">
            {{ list.id }}
          </td>
          <td>{{ list.name }}</td>
          <td>{{ list.nickname }}</td>
          <td>{{ list.email }}</td>
          <td>{{ list.intro }}</td>
          <td>{{ list.status }}</td>
          <td>{{ list.hobby }}</td>
          <td>{{ list.group }}</td>
          <td>{{ list.login_time }}</td>
          <td>{{ list.login_times }}</td>
          <td>{{ list.create_time }}</td>
          <td>{{ list.edit_time }}</td>
          <td class="text-center">
            <div class="btn-group">
              <button type="button" class="btn btn-success">启用</button>
              <button type="button" class="btn btn-primary" style="margin-left: 10px" @click="editInfo(list)">编辑
              </button>
              <button type="button" class="btn btn-danger" style="margin-left: 10px;">禁用</button>
            </div>
          </td>
        </tr>
        </tbody>
      </table>
      <transition name="paginate" mode="out-in">
      <paginate :nowPaginate="parseInt(currentPage)" :totalList="totalList" v-if="pageShow"></paginate>
      </transition>
      <transition name="edit" mode="out-in">
        <user-edit v-if="editShow" :userInfo="EditInfo" @CloseEdit='editClose'></user-edit>
      </transition>
    </div>
    <transition name="loading" mode="out-in">
      <loading v-if="loadAt"></loading>
    </transition>
  </div>
</template>
<script type="text/ecmascript-6">
  import http from '../../static/http/http';
  import {mapState, mapMutations} from 'vuex';
  import loading    from '../../components/comment/loading/loading';
  import paginate   from '../../components/comment/paginate/paginate'
  import _    from 'lodash';
  import UserEdit from './edit'; // 吧编辑页面拿到列表页以增强用户体验
  const ERROR_CODE = 1001;
  export default{
    name: "user_index",
    mixins: [http],
    data(){
      return {
        actions_param: [],
        lists: [],
        editShow: false,
        EditInfo: {},
        field_name: {
          status: {1: '启用', 0: '禁用'},
          hobby: {1: '篮球', 2: '足球'},
          group: {1: '经理组', 2: '员工组', 3: '编辑组', 4: '草泥马组'}
        },
        currentPage:1,  // 基础配置
        totalList:1,    // 基础配置
        pageShow:false,
      }
    },
    created(){
      this.get_list();
    },
    computed: {
      ...mapState({loadAt: 'loading'})
    },
    methods: {
      ...mapMutations({
        set_loadAt: 'set_loading'
      }),
      get_list(){
        let page    =this.$route.query.page || 1;
        this.set_loadAt({code: 100, meta: true});
        this.pageShow=false;
        this.apiGet(`/api/admin/user/index?page=${page}`).then((response) => {
          let response_data = response.data.list.data;
          let error_code = response.data.status;
          let data = response_data;
          if (error_code !== ERROR_CODE && data.length !== 0) {
            this.$nextTick((response_text) => {
              //  如果后台用了我们tp5的拾取器，或者修改器的话那么请删除下面循环代码 下面代码不简洁可优化
              this.currentPage   = response.data.list.current_page;
              this.totalList      =response.data.list.total;
              data.forEach((value) => {
                let keys = Object.keys(value);
                keys.forEach((item) => {
                  if (item in this.field_name) {
                    value[item] = this.field_name[item][value[item]];
                  }
                });
              });
              this.lists    = [...data];
              this.pageShow = true;
            });
            this.set_loadAt({code: 120, meta: false, custom_info: response.data.info});
          } else {
            this.set_loadAt({code: 120, meta: false, custom_info: response.data.info});
          }
        }).catch((response) => {
          this.set_loadAt({code: 102, meta: false});
        });
      }, editInfo(info){
        this.EditInfo = info;
        this.editShow = true;
      }, editClose(){
        this.editShow = false;
      }
    }, components: {loading, UserEdit,paginate},
    watch:{
          '$route':'get_list'
    }
  }
</script>
<style type="stylus">
  .edit-enter-active, .edit-leave-active {
    transition: all .4s;
  }

  .edit-enter, .edit-leave-active {
    transform: translate3d(2rem, 0, 0);
    opacity: 0;
  }
  .paginate-enter-active, .paginate-leave-active {
    transition: all .4s;
  }

  .paginate-enter, .paginate-leave-active {
    transform: translate3d(2rem, 0, 0);
    opacity: 0;
  }
</style>
